import React from 'react';
import { connect } from 'dva';
import { Form, Button, Alert, Divider } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './style.less';

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@connect(({ testrecord, loading }) => ({
  formData: testrecord.formData,
  loading: loading.models.testrecord.loading
}))
export default Form.create()(
  class extends React.PureComponent {

    handleSubmit = (e) => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if(!err){
          this.props.dispatch({
            type:'testrecord/add',
            payload: this.props.formData
          })
        }
      });
      
    };
    
    mapUsers = (users) => {
      if(users){
        users =  users.map((user) => {
          return `${user.realName}(${user.userName})`;
        });
        return users.join('|');
      }else{
        return '';
      }
     
    }

    onPrev = () => {
      this.props.dispatch(routerRedux.push('/testcenter/testsubmit/info'));
    }; 

    render() {
      const { formData, loading } = this.props; 
  
      return (
        <Form layout="horizontal" className={styles.stepForm}>
          <Alert
            closable
            showIcon
            message="确认提测信息填写无误后，进行提交。"
            style={{ marginBottom: 24 }}
          />
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="提测项目">
            {formData.project.name}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="提测版本">
            {formData.version.name}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="测试">
            {this.mapUsers(formData.project.tester)}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="开发">
            {this.mapUsers(formData.project.developer)}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="产品">
            {this.mapUsers(formData.project.pm)}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="新功能">
            {formData.newFeatureRemark}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="修改点">
            {formData.updateRemark}
          </Form.Item>
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="建议">
            {formData.adviseRemark}
          </Form.Item>
          <Divider style={{ margin: '24px 0' }} />
          <Form.Item {...formItemLayout} className={styles.stepFormText} label="提测包(地址)">
            {formData.testPackageUrl}
          </Form.Item>
          <Form.Item
            style={{ marginBottom: 8 }}
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: {
                span: formItemLayout.wrapperCol.span,
                offset: formItemLayout.labelCol.span,
              },
            }}
            label=""
          >
            <Button type="primary" onClick={this.handleSubmit} >
              提交
            </Button>
            <Button onClick={this.onPrev} style={{ marginLeft: 8 }}>
              上一步
            </Button>
          </Form.Item>
        </Form>
      );
    }
  }
);
